<script setup lang="ts" name="top-header">
import { ref, reactive, onMounted, onActivated, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage, ElScrollbar } from "element-plus";
import Bus from "@/utils/eventBus";

const router = useRouter();
const store = useStore();
const isCollapse = ref(false);
let topMenuList = reactive([
  // {
  //   name: "驾驶舱",
  //   router: "cockpit",
  //   defaultActive: "cockpit_index",
  // },
  // {
  //   name: "模具管理",
  //   router: "mould",
  //   defaultActive: "mould_index",
  // },
  // {
  //   name: "AI预警",
  //   router: "warning",
  //   defaultActive: "warning_visual",
  // },
  // {
  //   name: "视频汇聚",
  //   router: "video",
  //   defaultActive: "video_visual",
  //   icon: "video",
  // },
  // {
  //   name: "智能巡检",
  //   router: "inspection",
  //   defaultActive: "inspection_index",
  // },
  // {
  //   name: "设备管理",
  //   router: "repair",
  //   defaultActive: "repair_index",
  // },
  // {
  //   name: "应急演练",
  //   router: "emergency",
  //   defaultActive: "emergency_index",
  // },
  // {
  //   name: "设置",
  //   router: "set",
  //   defaultActive: "set_account",
  // },
  // {
  //   name: "教培考",
  //   router: "test",
  //   defaultActive: "dashboard_null",
  // },
  // {
  //   name: "环境监测",
  //   router: "environment",
  //   defaultActive: "environment_index",
  // },
  // {
  //   name: "电子围栏",
  //   router: "enclosure",
  //   defaultActive: "enclosure_index",
  // },
  // {
  //   name: "人员定位",
  //   router: "test",
  //   defaultActive: "dashboard_null",
  // },
  // {
  //   name: "热力图",
  //   router: "test",
  //   defaultActive: "dashboard_null",
  // },
  // {
  //   name: "人员管理",
  //   router: "test",
  //   defaultActive: "dashboard_null",
  // },
  // {
  //   name: "特种设备",
  //   router: "test",
  //   defaultActive: "dashboard_null",
  // },
  // {
  //   name: "能耗监测",
  //   router: "energy",
  //   defaultActive: "energy_index",
  // },
  // {
  //   name: "智能安全帽",
  //   router: "safetyhat",
  //   defaultActive: "safetyhat_index",
  // },
  // {
  //   name: "智慧广播",
  //   router: "test",
  //   defaultActive: "dashboard_null",
  // },
  // {
  //   name: "车辆管理",
  //   router: "test",
  //   defaultActive: "dashboard_null",
  // },
  // {
  //   name: "智慧工厂圈",
  //   router: "test",
  //   defaultActive: "dashboard_null",
  // },
  // {
  //   name: "AI开放",
  //   router: "aicome",
  //   defaultActive: "aicome_index",
  // },
  {
    name: "驾驶舱",
    router: "cockpit",
    defaultActive: "cockpit_index",
  },
  {
    name: "视频汇聚",
    router: "video",
    defaultActive: "video_visual",
    icon: "video",
  },
  {
    name: "AI预警",
    router: "warning",
    defaultActive: "warning_visual",
  },
  {
    name: "智能巡检",
    router: "inspection",
    defaultActive: "inspection_index",
  },
  {
    name: "设备管理",
    router: "repair",
    defaultActive: "repair_index",
  },
  {
    name: "应急辅助",
    router: "emergency",
    defaultActive: "emergency_index",
  },
  {
    name: "智能票据",
    router: "bill",
    defaultActive: "bill_index",
  },
  {
    name: "环境监测",
    router: "environment",
    defaultActive: "environment_index",
  },
  {
    name: "电子围栏",
    router: "enclosure",
    defaultActive: "enclosure_index",
  },
  {
    name: "能耗监测",
    router: "energy",
    defaultActive: "energy_index",
  },
  {
    name: "智能安全帽",
    router: "safetyhat",
    defaultActive: "safetyhat_index",
  },
  {
    name: "模具管理",
    router: "mould",
    defaultActive: "mould_index",
  },
  {
    name: "AI开放",
    router: "aicome",
    defaultActive: "aicome_index",
  },
  {
    name: "特种设备",
    router: "test",
    defaultActive: "dashboard_null",
  },
  {
    name: "人员定位",
    router: "test",
    defaultActive: "dashboard_null",
  },
  {
    name: "智慧广播",
    router: "test",
    defaultActive: "dashboard_null",
  },
  {
    name: "车辆管理",
    router: "test",
    defaultActive: "dashboard_null",
  },
  {
    name: "热力图",
    router: "test",
    defaultActive: "dashboard_null",
  },
  {
    name: "人员管理",
    router: "test",
    defaultActive: "dashboard_null",
  },
  {
    name: "教培考",
    router: "test",
    defaultActive: "dashboard_null",
  },
  {
    name: "智慧工厂圈",
    router: "test",
    defaultActive: "dashboard_null",
  },
  {
    name: "设置",
    router: "set",
    defaultActive: "set_account",
  },
]);
const activeName = ref();
onMounted(() => {
  // max.value = innerRef.value!.clientWidth
  let path = router.currentRoute.value.path;
  activeName.value = path.split("/")[1];
});
const user = computed(() => {
  return store.state.user;
});
const max = ref(0);
const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();
const setCollapse = () => {
  isCollapse.value = !isCollapse.value;
  Bus.$emit("isCollapse", isCollapse.value);
};
const headerScroll = (type: string) => {
  let scrollLeft: any = scrollbarRef.value!.wrap$?.scrollLeft;
  if (type == "left") {
    scrollLeft -= 86 * 3;
  } else {
    scrollLeft += 86 * 3;
  }

  scrollbarRef.value!.setScrollLeft(scrollLeft);
};
const goPage = (data: any) => {
  if (data.router == "test") {
    ElMessage.error({
      message: "测试模块",
      grouping: true,
    });
    return;
  }
  activeName.value = data.router;
  let pushName = data.defaultActive;
  router.push({ name: pushName });
  Bus.$emit("change-menu", {
    defauleMenu: pushName,
    routeName: data.router,
  });
  // store.commit('SET_MENU_NAME',name)
};
const logout = () => {
  window.localStorage.setItem("token", "");
  router.push({ name: "login" });
};
</script>

<template>
  <div class="header-container" :class="{ isCollapse: isCollapse }">
    <div @click="setCollapse">
      <el-icon class="menu-icon">
        <Expand />
      </el-icon>
    </div>

    <div class="top-menu-scrollbar">
      <el-icon class="scrollbar-left" @click="headerScroll('left')">
        <CaretLeft />
      </el-icon>
      <el-icon class="scrollbar-right" @click="headerScroll('right')">
        <CaretRight />
      </el-icon>
      <el-scrollbar ref="scrollbarRef">
        <div class="top-menu-box" ref="innerRef">
          <div
            v-for="(item, index) in topMenuList"
            :key="index"
            class="top-menu"
            :class="{ active: activeName == item.router }"
            @click="goPage(item)"
          >
            <svg-icon
              :icon-class="item.router"
              style="width: 30px; height: 30px"
            ></svg-icon>
            <div>{{ item.name }}</div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="user-info">
      <div>{{ user.name }}</div>
      <div @click="logout">退出登录</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-container {
  height: 90px;
  background: #1f1f1f;
  display: flex;
  align-items: center;
  padding: 0 16px;
  &.isCollapse {
    .menu-icon {
      transform: rotateY(0);
    }
  }
  .menu-icon {
    color: #fff;
    font-size: 30px;
    margin-right: 16px;
    cursor: pointer;
    transform: rotateY(180deg);
  }
  .top-menu-scrollbar {
    flex: 1;
    height: 100%;
    width: 1px;
    position: relative;
    margin: 0 30px;
    .scrollbar-left,
    .scrollbar-right {
      position: absolute;
      left: -20px;
      top: 35px;
      cursor: pointer;
    }
    .scrollbar-right {
      position: absolute;
      left: auto;
      right: -20px;
    }
    .top-menu-box {
      display: flex;
      .top-menu {
        width: 86px;
        height: 90px;
        cursor: pointer;
        flex-shrink: 0;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &.active {
          background: #1890ff;
        }
      }
    }
  }
  .user-info {
    width: 100px;
    cursor: pointer;
    text-align: center;
  }
}
</style>
